<template>
  <div class="page-container" v-loading="loading" v-loadingCommonStyle>

    <echarts :option-data="echartsOptionData" :styles="{ height: '400px' }" height="100%" width="100%" />

    <ex_super_table style="margin-top: 20px;" v-bind="containerDetailsOption" :data="form.omsPurchaseOrderDetailList"
      ref="containerDetailsRef" />

  </div>
</template>
<script>


import router_params from '@/mixin/router_params';

export default {
  title: "label_supplier_statistics_detail",
  mixins: [router_params],
  data() {
    return {
      loading: false,

      form: {},
      containerDetailsOption: {
        model: [
          { key: 'skuName', label: 'label_time', 'show-overflow-tooltip': true, },
          { key: 'skuNameEn', label: 'label_purchase_purchase_order_qty', 'show-overflow-tooltip': true, },
          { key: 'purchasePrice', label: '采购订单完成数', 'show-overflow-tooltip': true, },
          { key: 'purchaseQty', label: '采购订单变更数', 'show-overflow-tooltip': true, },
          { key: 'purchaseTotalPrice', label: '采购订单取消数', 'show-overflow-tooltip': true, },
          { key: 'currencyCode', label: '终止剩余到货', formatter: (r, c, v, i) => this.$enumShow(v, "CurrencyTypeEnum"), 'show-overflow-tooltip': true, },
          { key: 'purchaseTotalPrice', label: '采购数量', 'show-overflow-tooltip': true, },
          { key: 'purchaseTotalPrice', label: '到货数量', 'show-overflow-tooltip': true, },
          { key: 'purchaseTotalPrice', label: '采购金额', 'show-overflow-tooltip': true, },
        ],
      },
      echartsOptionData: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
          bottom: 0
        },
        grid: {
          top: '20px',
          left: '20px',
          right: '20px',
          bottom: '40px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            rotate: 38
          },
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            smooth: true,
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Union Ads',
            type: 'line',
            smooth: true,
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'Video Ads',
            type: 'line',
            smooth: true,
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: 'Direct',
            type: 'line',
            smooth: true,
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: 'Search Engine',
            type: 'line',
            smooth: true,
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
    };
  },

  methods: {
    init_data_default(into_params) {
      if (into_params.id) {
        this.loading = true
        this.$ajax({
          url: '/oms-api/purchase/OmsPurchaseOrderPaymentRpc/selectDetail.json',
          method: 'post',
          data: { id: into_params.id },
          success: (res) => {
            this.loading = false
            Object.assign(this.form, res.data)
            this.fixTabLabel()

          }
        })
      }
      this.fixTabLabel()
    },
    fixTabLabel() {
      this.$emit("tagModifyLabel", {
        _key: 'label_name_code',
        name: this.$t("label_supplier_statistics_detail"),
        code: this.form.id || ""
      })
    },

  }
};

</script>
<style></style>
